<template>
    <div class="not-found">
        <div class="content">
            <h1>404</h1>
            <h2>抱歉，页面不见了</h2>
            <p>您访问的页面可能已被删除、更名或暂时不可用</p>
            <div class="actions">
                <el-button type="primary" @click="goBack">返回上一页</el-button>
                <el-button @click="goHome">返回首页</el-button>
            </div>
            <div class="countdown">
                {{ countdown }}秒后自动返回首页
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const countdown = ref(5)
let timer:any = null

// 返回上一页
const goBack = () => {
    router.back()
}

// 返回首页
const goHome = () => {
    router.push('/')
}

// 倒计时
const startCountdown = () => {
    timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
            clearInterval(timer)
            goHome()
        }
    }, 1000)
}

onMounted(() => {
    startCountdown()
})

onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})
</script>

<style scoped>
.not-found {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
}

.content {
    text-align: center;
    padding: 40px;
}

h1 {
    font-size: 120px;
    color: #409eff;
    margin: 0;
    line-height: 1;
    font-weight: 600;
}

h2 {
    font-size: 30px;
    color: #333;
    margin: 20px 0;
    font-weight: 500;
}

p {
    color: #666;
    font-size: 16px;
    margin-bottom: 30px;
}

.actions {
    margin-bottom: 20px;
}

.actions .el-button {
    margin: 0 10px;
}

.countdown {
    color: #909399;
    font-size: 14px;
}
</style>